import React, { useEffect, useState } from 'react'
import { Breadcrumb } from 'antd';
import { Link, useLocation } from 'umi';
import _ from 'lodash'
import { routerList } from './../../utils/routerList';
const MyBao = () => {

    const location = useLocation()
    const [list, setList] = useState<any>([])
    const [label, setLabel] = useState<any>('')
    const getLabel = (list: any) => {
        _.forEach(list, (item: any) => {
            if (item.routes) {
                getLabel(item.routes)
            } else {
                if (item.path == location.pathname) {
                    setLabel(item.text)
                    setTimeout(() => {
                        list.push({
                            ...location, key: location.pathname, label: item.text
                        })
                        var arr: any = []
                        var obj: any = {}
                        _.forEach(list, (item: any) => {
                            if (!obj[item.label]) {
                                arr.push(item)
                                obj[item.label] = item.label
                            }
                        })
                        setList([...arr])
                    }, 10)
                    return;
                }
            }
        });
    }

    useEffect(() => {
        console.log(location)

        getLabel(routerList)


    }, [location])

    return (
        <Breadcrumb>
            {
                _.map(list, (item: any, index: any) => {
                    return (
                        item.label && <Breadcrumb.Item key={index} >
                            <Link to={item.pathname} >{item.label}</Link>
                        </Breadcrumb.Item>
                    )
                })
            }
        </Breadcrumb>
    )
}

export default MyBao